<script>
import vocabularyDetail from "@/components/vocabularyDetail.vue"
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import request from "@/utils/request"
import { showModal, showToast } from "@/utils"
import empty from "@/components/empty.vue"

export default {
  name: "wordList",
  components: { empty, vocabularyDetail, uniLoadMore },
  data() {
    return {
      loadMoreStatusText: "more",
      list: [],
      pagination: {
        current: 1,
        size: 10,
      },
    }
  },
  methods: {
    loadData() {
      return new Promise((resolve, reject) => {
				if (this.loadMoreStatusText === "loading") {
					resolve()
				}
				this.loadMoreStatusText = "loading"
				request({
          url: "userFavoriteWords/getFavoriteWordsPage",
          data: this.pagination,
          errorHandle: true,
        })
          .then((data) => {
            this.list.push(...data.records)
            //检查是否有下一页
            if (this.list.length >= data.total) {
              this.loadMoreStatusText = "noMore"
            } else {
              this.loadMoreStatusText = "more"
            }
            resolve()
          })
          .catch(() => {
            reject()
          })
      })
    },
    //清空分页并重新加载数据
    async resetPaginationAndLoadData() {
      this.pagination.current = 1
      this.list = []
      await this.loadData()
    },
    //将单词从已收藏列表中删除
    async deleteCollection(item, index) {
      if (
        !(await showModal({
          title: "警告",
          content: "确定要将该单词从收藏列表中移除吗？",
        }))
      ) {
        return
      }
      await request({
        url: "userFavoriteWords/del",
        data: {
          ids: [item.enWord],
        },
        errorHandle: true,
      })
      showToast.success("删除成功")
      this.list.splice(index, 1)
    },
		//下拉刷新
		pullDownRefresh() {
			this.resetPaginationAndLoadData().finally(() => {
				uni.stopPullDownRefresh()
			})
		},
		//滑到底加载更多
		reachBottom() {
			if (this.loadMoreStatusText === "noMore" || this.loadMoreStatusText === "loading") {
				return
			}
			this.pagination.current++
			this.loadData()
		},
  },
}
</script>

<template>
  <view class="component">
    <!--		单词列表-->
    <view class="list vocabulary-list" v-if="list.length > 0">
      <view class="item vocabulary-item" v-for="(item, index) in list" :key="item.wordId" @click="$refs.vocabularyDetail.open(item.enWord)">
        <view class="row">
          <!--				单词英文-->
          <view class="title">{{ item.enWord }}</view>
          <!--					音标-->
          <view class="info phonetic">{{ item.phonetic }}</view>
        </view>
        <view class="row">
          <!--				中文解释-->
          <view class="info">{{ item.znWord }}</view>
        </view>
        <view class="row">
          <!--					例句-->
          <view class="enSentence" v-if="item.enSentence">{{ item.enSentence }}</view>
        </view>
        <view class="divide-line"></view>
        <view class="row btn-row">
          <!--					查看详细-->
          <view class="btn info" @click="$refs.vocabularyDetail.open(item.enWord)">查看明细 </view>
          <!--					删除-->
          <view class="btn danger" @click.stop="deleteCollection(item, index)">取消收藏</view>
        </view>
      </view>
			<!--		加载下一页-->
			<uni-load-more :status="loadMoreStatusText"></uni-load-more>
		</view>
		<empty v-else height="calc(100vh - 100rpx)"></empty>
		
    <!--		词汇详情-->
    <vocabularyDetail ref="vocabularyDetail"></vocabularyDetail>
  </view>
</template>

<style scoped lang="scss">
.list {
	padding-left: 30rpx;
	padding-right: 30rpx;
	.item {
    background: white;
    border-radius: 30rpx;
    padding: 30rpx;
    margin-top: 30rpx;
    .row {
      display: flex;
      align-items: center;
      &:not(:last-child) {
        margin-bottom: 20rpx;
      }
      &.btn-row {
        justify-content: space-between;
      }
      > .title {
        font-size: 36rpx;
        color: var(--text-color);
        font-weight: bold;
      }
      > .info {
        font-size: 32rpx;
        color: var(--text-color-light);
      }
    }
    .divide-line {
      height: 2rpx;
      background: var(--border-color);
      margin: 20rpx 0;
    }
    .btn {
      font-size: 30rpx;
      height: 60rpx;
      line-height: 60rpx;
      padding: 0 40rpx;
      border-radius: 30rpx;

      &.primary {
        background: var(--theme-color);
        color: white;
      }

      &.info {
        background: var(--gray-background-color);
        border: 2rpx solid var(--border-color);
      }

      &.danger {
        background: #c0392b;
        color: white;
      }
    }
  }
}

.vocabulary-list {
  .vocabulary-item {
    .phonetic {
      margin-left: 30rpx;
    }
    .enSentence {
      font-size: 32rpx;
      //文本溢出部分自动加省略号
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
